<!--
 * @Description: 子集物料
 * @Autor: 商晓彬
 * @Date: 2021-06-23 12:09:31
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-11-22 11:08:11
-->
<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="son modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div style="width:1880px!important;margin: 1.75rem auto;">
        <div class="modal-content">
            <form style="height: 890px!important;overflow: auto;" *ngIf="active" #bopForm="ngForm" novalidate
                (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{title}}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group" style="display: flex;">
                        <label for="materialCode" style="margin-top: 7px;margin-left: 40px;">图号</label>
                        <input style="width: 300px;margin-left: 10px;" readonly id="materialCode" #modelInput="ngModel"
                            type="text" name="materialCode" class="form-control" [(ngModel)]="form.materialCode"
                            maxlength="256" />
                        <label for="materialname" style="margin-top: 7px;margin-left: 50px;">名称</label>
                        <input style="width: 300px;margin-left: 10px;" readonly id="materialname" #lotNoInput="ngModel"
                            type="text" name="materialname" class="form-control" [(ngModel)]="form.materialname"
                            maxlength="256" />
                        <label for="modelName" style="margin-top: 7px;margin-left: 50px;">规格型号</label>
                        <input style="width: 300px;margin-left: 10px;" readonly id="model" #modelNameInput="ngModel"
                            type="text" name="model" class="form-control" [(ngModel)]="form.model" maxlength="256" />
                        <!-- <label for="modelName" style="margin-top: 7px;margin-left: 50px;">是否标准件</label>
                        <input style="width: 300px;margin-left: 10px;" readonly id="part" #modelNameInput="ngModel"
                            type="text" name="part" class="form-control" [(ngModel)]="form.part" maxlength="256" /> -->
                    </div>
                    <!-- <div class="form-group">
                      
                    </div> -->
                    <div class="form-group" style="display: flex;">
                        <button style="margin-left: 40px;" pButton type="button" label="新增"
                        (click)="addSon()"></button>
                        <label for="materialCode" style="margin-top: 7px;margin-left: 40px;">图号</label>
                        <input style="width: 200px;margin-left: 10px;" id="materialCode"
                            type="text" name="materialCodes" class="form-control" [(ngModel)]="search.materialCode"
                            maxlength="256" />
                        <label for="materialname" style="margin-top: 7px;margin-left: 50px;">名称</label>
                        <input style="width: 200px;margin-left: 10px;" id="materialname" 
                            type="text" name="materialnames" class="form-control" [(ngModel)]="search.materialname"
                            maxlength="256" />
                            <button style="margin-left: 20px;" pButton type="button" label="查询"
                            (click)="getTableList()"></button>
                            <button style="margin-left: 20px;" pButton type="button" label="重置"
                            (click)="resert()"></button>
                    </div>
                    <div class="row align-items-center" style="margin-top: 25px;">
                        <div class="primeng-datatable-container">
                            <p-table #dataTable [value]="primengTableHelper.records" (onLazyLoad)="getTableList($event)"
                                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="primengTableHelper.resizableColumns" [(selection)]="selectRow">
                                <ng-template pTemplate="header" selectionMode="multiple">
                                    <tr>
                                        <th style="width: 50px">
                                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                        </th>
                                        <th style="width: 50px">序号</th>
                                        <th style="width: 150px">图号</th>
                                        <th style="width: 150px">名称</th>
                                        <th style="width: 150px">型号</th>
                                        <th style="width: 150px">属性</th>
                                        <th style="width: 150px">是否启用</th>
                                        <th style="width: 150px">备注</th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                    <tr>
                                        <td style="width: 50px">
                                            <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                        </td>
                                        <td style="width: 50px">{{rowIndex+1}}</td>
                                        <td style="width: 150px">{{record.materialNo}}</td>
                                        <td style="width: 150px">{{record.materialName}}</td>
                                        <td style="width: 150px">{{record.model}}</td>
                                        <td style="width: 150px">{{getAttribute(record.attribute)}}</td>
                                        <td style="width: 150px">{{record.isUsed == 'False'? '停用':'启用'}}</td>
                                        <td style="width: 150px">{{record.remark}}</td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-paging-container">
                                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                    (onPageChange)="getTableList($event)"
                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count">
                                    {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="justify-content: center;" *ngIf="!addFlag">
                    <button type="submit" class="btn btn-primary" [buttonBusy]="saving"
                        [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>选择</span></button>
                </div>
                <!-- 新增弹窗 -->
                <p-dialog class="dialog" draggable=false header="新增" [(visible)]="addFlag" (onHide)="closeParent($event)"
                    [style]="{width: '800px', height: '500px'}" [baseZIndex]="1000">
                    <div class="modal-body" *ngIf="addFlag">
                        <div class="form-group" style="display: flex;">
                            <label for="materialCode" style="margin-top: 7px;width: 63.72px;">图号*</label>
                            <input name="addmaterialCode" style="width: 200px;margin-left: 10px;" id="addmaterialCode"
                                #materialCodeInput="ngModel" type="text" class="form-control"
                                [(ngModel)]="addForm.materialCode" maxlength="256" required />
                            <validation-messages [formCtrl]="materialCodeInput"></validation-messages>
                            <label for="materialname" style="margin-top: 7px;margin-left: 100px;width: 63.72px;">名称*</label>
                            <input name="addmaterialname" style="width: 200px;margin-left: 10px;" id="addmaterialname"
                                #materialnameInput="ngModel" type="text" class="form-control"
                                [(ngModel)]="addForm.materialname" maxlength="256" required />
                            <validation-messages [formCtrl]="materialnameInput"></validation-messages>
                        </div>
                        <div class="form-group" style="display: flex;">
                            <label for="materialProperties" style="margin-top: 7px;margin-right: 10px;width: 63.72px;">属性*</label>
                            <p-dropdown disabled required name="addmaterialProperties" #materialPropertiesSelect="ngModel"
                                [options]="materialPropertiesOption" [(ngModel)]="addForm.materialProperties">
                                <ng-template let-select pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                                </ng-template>
                                <ng-template let-select pTemplate="select">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 175px;">
                                            {{select.label}}</div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="materialPropertiesSelect"></validation-messages>
                            <label for="model" style="margin-top: 7px;margin-left: 100px;width: 63.72px;">规格型号</label>
                            <input  name="addModel" style="width: 200px;margin-left: 11px;" id="addModel"
                                type="text" class="form-control"
                                [(ngModel)]="addForm.materialModel" maxlength="256" />
                        </div>
                        <div class="form-group" style="display: flex;">
                            <label style="margin-top: 5px;" for="isUsed">是否启用*</label>
                            <p-toggleButton name="isUsed" style="margin-left: 10px" [(ngModel)]="addForm.isUsed"
                                onLabel="启用" offLabel="停用" onIcon="pi pi-check" offIcon="pi pi-times"
                                [style]="{'width':'150px'}">
                            </p-toggleButton>
                        </div>
                        <div class="form-group">
                            <label for="remark">备注</label>
                            <input style="margin-left: 10px;" id="remark" type="text" name="remark" class="form-control"
                                [(ngModel)]="addForm.remark" maxlength="256" />
                        </div>
                    </div>
                    <div class="modal-footer" style="margin-top: 14px;">
                        <button [disabled]="!bopForm.form.valid" pButton type="button" label="保存"
                            (click)="addSave()"></button>
                    </div>
                </p-dialog>
            </form>
        </div>
    </div>

</div>